import { WeaErrorPage, WeaTools, WeaTextarea, WeaBrowser, WeaSelect, WeaNewScroll, WeaFormItem, WeaError } from 'ecCom';
import { Button, Icon, Input, Modal, Spin, Card, Pagination, Row, Col } from 'antd';
import equal from 'deep-equal';
import { observer } from 'mobx-react';
import CrmSearchGroup from '../comp/crm-show-group';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
class ContractDiscuss extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowHeight: '1',
      value: '',
      docDatas: [],
      isrefresh: 0,
      relateddoc: '',
    };
  }
  render() {
    const { datas } = this.props;
    const { rowHeight, value, docDatas } = this.state;
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
    };
    return (
      <div className="customer-contact">
        <div>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@escnfn`} >
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@682nxq`} span="24" style={{ marginBottom: '5px' }}>
              <WeaError
                ecId={`${this && this.props && this.props.ecId || ''}_WeaError@b8fh1v`}
                tipPosition="bottom"
                ref="logInputError"
                style={{ width: '100%' }}
                error={getLabel(84370, '请填写联系记录！')}
              >
                <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@e2sm8u`} type="textarea" value={value} onChange={this.inputOnChange} placeholder={getLabel(84370, '请填写联系记录！')} rows={rowHeight} onFocus={() => this.textOnFocus(4)} />
              </WeaError>
            </Col>
          </Row>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tp4jbm`} className="customer-contact-header" style={{ display: rowHeight == '1' ? 'none' : 'block' }}>
            <CrmSearchGroup
              ecId={`${this && this.props && this.props.ecId || ''}_CrmSearchGroup@x9buva`}
              needTigger
              leftComponent={
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tb117y`} span="24" >
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yyiyuv`} type="primary" onClick={() => this.submitDiscuss()}>{getLabel(615, '提交')}</Button>
                </Col>
              }
              rightComponent={getLabel(83273, '附加信息')}
              showGroup={false}
            >
              {this.getFormItem()}
            </CrmSearchGroup>
          </Row>
        </div>
        <div className="customer-contact-content" style={{ padding: '5px 10px' }} onClick={this.textOnBlur}>
          <div id="relateExchange" style={{ overflow: 'auto', height: '100%' }}>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@wzas5u`} height={'100%'} children={<ViewExchange ecId={`${this && this.props && this.props.ecId || ''}_ViewExchange@sea3nx`} data={datas} />} />
          </div>
        </div>
      </div>
    );
  }
    inputOnChange = (e) => {
      this.setState({ value: e.target.value });
    }
    textOnFocus = (h) => {
      this.setState({
        rowHeight: h,
      });
    }
    textOnBlur = () => {
      const { value } = this.state;
      if (!value) {
        this.setState({ rowHeight: 1 });
      }
    }
    InputOnChange = (e) => {
      this.setState({ value: e.target.value });
    }
    docOnChange = (ids, names, datas) => {
      this.setState({ docIds: ids, docDatas: datas });
    }
    getFormItem() {
      const { isrefresh } = this.state;
      const items = [
        { label: getLabel(857, '相关文档'), title: getLabel(58, '文档'), type: '37', key: 'relateddoc', show: true, num: isrefresh },
      ];
      const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
      };
      const group = [];
      items.map((item,index) => {
        if (item.show) {
          group.push(
            <WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7smd08@${index}`}
              label={item.label}
              {...formItemLayout}
            >
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@mpyadw@${index}`} key={item.num} type={item.type} title={item.title} hasAdvanceSerach isSingle={false} onChange={(ids, names, datas) => this.browserOnchange(item.key, ids, names, datas)} />
            </WeaFormItem>,
          );
        } else {

        }
      });
      return group;
    }
    browserOnchange = (type, ids, names, datas) => {
      if (type == 'relateddoc') {
        this.setState({ relateddoc: ids });
      }
    }

    // 提交
    submitDiscuss = () => {
      const { value, relateddoc } = this.state;
      const { contractId, saveDiscuss } = this.props.contentStore;
      const { params } = this.props;
      if (value) {
        const content = {
          contractId,
          remark: value.replace(/(^\s*)|(\s*$)/g, '').replace(/\n/g, '<br>'),
          docIds: relateddoc,
        };
        saveDiscuss(content);
        this.setState({
          relateddoc: '',
          docDatas: [],
          rowHeight: 1,
          value: '',
          isrefresh: this.state.isrefresh + 1,
        });
      } else {
        this.refs.logInputError.showError();
        // Modal.info({
        //     title: getLabel(15172, "系统提示"),
        //     content: getLabel(84370, "请填写联系记录！"),
        //     okText: getLabel(33703, "确定")
        // });
      }
    }
}

class ViewExchange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1 || props.page,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (!equal(this.props.data, nextProps.data)) {
      this.setState({ page: 1 });
    }
    return !equal(this.props.data, nextProps.data) ||
            !equal(this.state.page, nextState.page);
  }
  render() {
    const { page } = this.state;
    const { data } = this.props;
    return (

      <div className="crm-view-contacter">

        {this.getCards(page)}

        {
          data.length > 0 ?
            <div style={{}}>
              <Pagination
                ecId={`${this && this.props && this.props.ecId || ''}_Pagination@tn4wbz`}
                defaultCurrent={1}
                current={this.state.page}
                pageSize={10}
                total={data.length}
                onChange={this.changePageSize}
              /></div>
            : <div className="crm-no-datas-show">{getLabel(82090, '无匹配的结果！')}</div>
        }

      </div>

    );
  }
  getCards(page) {
    const { data } = this.props;
    const cards = [];
    data.map((item, index) => {
      if (index >= (10 * Number(page) - 10) && index <= (10 * Number(page) - 1)) {
        cards.push(
          <div className="crm-contract-exchange">
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fjte5f@${index}`}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gkk5nx@${index}`} span={12} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
                <div className="card-right-hrm">
                  <span className="card-call" dangerouslySetInnerHTML={{ __html: item.createrNameLink }} />
                  <span className="card-call">{item.createdatetime}</span>
                </div>
              </Col>
            </Row>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dbqfaz@${index}`}>
              <div className="card-right">
                <div className="feedbackrelate">
                  <div style={{ 'word-wrap': 'break-word', margin: '0px 10px 4px 4px' }} dangerouslySetInnerHTML={{ __html: item.remark }} />
                  {item.docIds && <div className="relatetitle" style={{ height: '24px', lineHeight: '24px', margin: '0 10px' }}>{getLabel(857, '相关文档')}:&nbsp;<span dangerouslySetInnerHTML={{ __html: item.docNames }} /></div>}
                </div>
              </div>
            </Row>
            <div className="clear" />
          </div>);
      }
    });
    return cards;
  }
    changePageSize = (page) => {
      this.setState({ page });
    }
}


export default ContractDiscuss;
